<template>
  <div>
    <div style="display: flex; margin-top: 40px">
      <div style="width: 25%; display: flex;justify-content: flex-end;">
        <div class="loading-icon">
          <img :class="isFail ? 'img' :this.stepStart1 && this.step == 1? ['img', 'run'] : 'img'" 
               :src="isFail ? failImg :  this.stepStart1 ? loadingImg : this.step > 1 ? finishImg :  waitImg">
          <span :class="step > 1 ? 'finish-text' : 'wait-text'">生成合同</span>
        </div>
      </div>
      <div class="line"></div>
      <div style="width: 15%; display: flex; justify-content:center">
        <div class="loading-icon">
          <img :class="isFail ? 'img' :this.stepStart2 && this.step == 2? ['img', 'run'] : 'img'" 
               :src="this.stepStart2 ? loadingImg : this.step > 2 ? finishImg :  waitImg" >
          <span :class="step > 2 ? 'finish-text' : 'wait-text'">申请用印</span>
        </div>
      </div>
      <div class="line"></div>
      <div style="width: 25%; display: flex;">
        <div class="loading-icon">
          <img :class="isFail ? 'img' :this.stepStart3 && this.step == 3? ['img', 'run'] : 'img'" 
               :src="this.stepStart3 ? loadingImg : this.step > 3 ? finishImg :  waitImg" >
          <span :class="step > 3 ? 'finish-text' : 'wait-text'">用印完成</span>
        </div>
      </div>
    </div>
    <div style="display: flex; justify-content: center;padding: 40px 0px 40px 0px">
      <span v-if="step <= 3 && !isFail" style="margin-top: 20px; margin-bottom: 20px">用印处理中，请勿关闭页面!</span>
      <el-button v-else type="primary" style="width: 220px;" @click="onBack">返回</el-button>
    </div>
  </div>
</template>

<script>
export default {
  data () {
    return {
      failImg: '../../../../static/icon_fail.png',
      waitImg: '../../../../static/icon_wait.png',
      loadingImg: '../../../../static/loading.png',
      finishImg: '../../../../static/icon_finish.png',
      step: 1,
      isFail: false,
      stepStart1: false,
      stepStart2: false,
      stepStart3: false
    }
  },
  props: {
    submitResult: String // 1生成成功  2生成不成功
  },
  created () {
    this.stepStart1 = true
  },
  methods: {
    onBack () {
      if (this.submitResult == '1') {
        this.$emit('onFinish')
      } else {
        this.$emit('onBack')
      }
    },
    start (step) {
      if (step === 1) {
        this.stepStart1 = true
      } else if (step == 2) {
        this.stepStart2 = true
      } else if (step == 3){
        this.stepStart3 = true
      }
      setTimeout(() => {
        this.changeStatus(this.step)
      }, 300);
    },
    changeStatus (step) {
      setTimeout(() => {
        if (step === 1) {
          this.stepStart1 = false
        } else if (step == 2) {
          this.stepStart2 = false
        } else if (step == 3){
          this.stepStart3 = false
        }
        this.step = step + 1
        if (this.step <=3 ) {
          this.start(this.step)
        }
      }, 300);
    }
  },
  watch: {
    submitResult: function(val) {
      console.log('submitResult', val);
      if (val == '1') {
        this.isFail = false
        this.start(1);
      } else if(val == '2') {
        this.isFail = true
      }
    }
  }
}
</script>

<style>
.loading-icon {
  display: flex;
  flex-direction: column;
  align-items: center;
}
@keyframes rotate {
  0%{-webkit-transform:rotate(0deg);}
  25%{-webkit-transform:rotate(90deg);}
  50%{-webkit-transform:rotate(180deg);}
  75%{-webkit-transform:rotate(270deg);}
  100%{-webkit-transform:rotate(360deg);}
}
/* 
  turn : 定义的动画名称
  1s : 动画时间
  linear : 动画以何种运行轨迹完成一个周期
  infinite :规定动画应该无限次播放
*/
.run { animation: rotate 1.5s linear infinite; }
.img{
  width: 50px;
  height: 50px;
}
.line{
  width: 25%;
  height: 1px;
  margin-top: 25px ;
  border-top: 2px dashed #999;
  /* border-bottom: 1px dashed #999; */
}
.wait-text{
  margin-top: 10px;
  color: gray;
}
.finish-text{
  margin-top: 10px;
  color: rgb(5, 117, 246);
}
</style>